<template>
  <!-- 添加或修改供应商信息对话框 -->
<el-dialog @close="cancel" :title="title" v-model="open" width="500px" append-to-body>
   <el-form ref="transPayRef" :model="form" :rules="rules" label-width="80px">
     <el-form-item label="承运商" prop="carrier">
       <el-input v-model="form.carrier" placeholder="请输入承运商" />
     </el-form-item>
     <el-form-item label="始发城市" prop="startCity">
       <el-input v-model="form.startCity" placeholder="请输入始发城市" />
     </el-form-item>
     <el-form-item label="到货城市" prop="endCity">
       <el-input v-model="form.endCity" placeholder="请输入到货城市" />
     </el-form-item>
     <el-form-item label="单公斤运费" prop="kilogramMoney">
       <el-input v-model="form.kilogramMoney" placeholder="请输入单公斤运费" />
     </el-form-item>
     <el-form-item label="立方运费" prop="cubeMoney">
       <el-input v-model="form.cubeMoney" placeholder="请输入立方运费" />
     </el-form-item>
     <el-form-item label="最小运费" prop="minMoney">
       <el-input v-model="form.minMoney" placeholder="请输入最小运费" />
     </el-form-item>
     <el-form-item label="状态" prop="status">
       <el-radio-group v-model="form.status">
         <el-radio
           v-for="dict in trans_pay_status"
           :key="dict.value"
           :label="parseInt(dict.value)"
         >{{dict.label}}</el-radio>
       </el-radio-group>
     </el-form-item>
   </el-form>
   <template #footer>
     <div class="dialog-footer">
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="cancel">取 消</el-button>
     </div>
   </template>
 </el-dialog>
</template>

<script lang="ts" setup>
import { toRefs,ref,reactive,getCurrentInstance,watch } from 'vue';
//接受父组件传入的参数
let props = defineProps({
title:{
   type:String,
   default:null
 },
 open:{
   type:Boolean,
   default:false
 },
 formInfo:{
   type:Object,
   default:null
 },
 trans_pay_status:{
   type:Array,
   default: []
 }
}
)

//接受父组件的事件
const emits = defineEmits(['submitFormBox','cancelBox'])
//定义函数-取消表单
const cancel = ()=>{
//调用父组件的方法
emits('cancelBox')
}
const proxy = getCurrentInstance()

//定义函数-提交表单
const submitForm = ()=>{
//校验规则
proxy.refs.transPayRef.validate((valid: boolean )=>{
 if(valid){
     emits('submitFormBox',form) 
 }
})
}

//监听器
watch(()=>props.formInfo,(newValue,oldValue)=>{
form = reactive(JSON.parse(JSON.stringify(newValue)))
},{deep:true})

//抽离父组件给的参数，解析成需要的属性
let {title,open} =toRefs(props)

let form = reactive({
id: null,
 carrier: null,
 startCity: null,
 endCity: null,
 kilogramMoney: null,
 cubeMoney: null,
 minMoney: null,
 status: null,
 createTime: null,
 updateTime: null,
 createBy: null,
 updateBy: null,
 isDelete: null
});

let rules = reactive({
 carrier: [
   { required: true, message: "承运商不能为空", trigger: "blur" }
 ],
 startCity: [
   { required: true, message: "始发城市不能为空", trigger: "blur" }
 ],
 endCity: [
   { required: true, message: "到货城市不能为空", trigger: "blur" }
 ],
 kilogramMoney: [
   { required: true, message: "单公斤运费不能为空", trigger: "blur" }
 ],
 cubeMoney: [
   { required: true, message: "立方运费不能为空", trigger: "blur" }
 ],
 minMoney: [
   { required: true, message: "最小运费不能为空", trigger: "blur" }
 ],
 status: [
   { required: true, message: "状态不能为空", trigger: "change" }
 ],
})
</script>


<style scoped>

</style>
